<template>
	<!--头部-->
	<div class="head_box">
		<div class="head">
			<!--列表-->
			<div class="information">
				<img src="../images/img1_03.png" />
			</div>
			<!--我的-->
			<div class="mine">
				<router-link to="/indexOne/sonOne">个人</router-link>
			</div>
			<!--发现-->
			<div class="mine2">
				<router-link to="/indexOne/sonOne" class="act">发现</router-link>
			</div>
			<!--搜索-->
			<div class="information">
				<img src="../images/sous.png" />
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped lang="scss">
	.head_box {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: #efefef;
		border-bottom: 1px solid #9b9b9b;
		box-sizing: border-box;
		z-index: 10;
		.head {
			width: 93%;
			height: 13%;
			padding: 0 1%;
			margin: 0 auto;
			font-size: 0;
			display: flex;
			justify-content: space-between;
			/*列表*/
			.information {
				margin: 4.4% 0;
				width: 5%;
				padding-top: 5%;
				overflow: hidden;
				position: relative;
				img {
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					margin: auto;
				}
			}
			.mine,
			.mine2 {
				width: 30%;
				font-weight: 600;
				font-size: 18px;
				display: flex;
				align-items: center;
				.act {
					color: #f71a45;
				}
			}
			/*我的*/
			.mine {
				justify-content: flex-end;
				a {
					color: #040404;
					text-align: right;
				}
			}
			/*发现*/
			.mine2 {
				a {
					color: #040404;
					text-align: left;
				}
			}
		}
	}
</style>